<template>
	<div class="rating_page">
        <head-top head-title="个人信息" go-back='true'></head-top>
		<div class="submit" @click="setUserInfo">完成</div>
        <section class="profile-info">
            <section class="headportrait">
                <input type="file" class="profileinfopanel-upload" @change="uploadAvatar">
                <h2>修改头像</h2>
                <div class="headportrait-div">
                    <img  v-if="userInfo" :src="imgBaseUrl + userInfo.head_img" class="headportrait-div-top">
                    <span class="headportrait-div-top" v-else>
                        <svg>
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#avatar-default"></use>
                        </svg>
                    </span>
                    <span class="headportrait-div-bottom">
                        <svg fill="#d8d8d8">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#right"></use>
                        </svg>
                    </span>
                </div>
            </section>
            <div class="info-router">
                <section class="headportrait headportraitwo">
                    <h2>修改昵称</h2>
                    <div class="headportrait-div">
                        <input class="username" type="text" v-model="username" />
                        <span class="headportrait-div-bottom">
                            <svg fill="#d8d8d8">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#right"></use>
                            </svg>
                        </span>
                    </div>
                </section>
            </div>
            <div class="info-router">
                <section class="headportrait headportraitwo">
                    <h2>性别</h2>
                    <div class="headportrait-div" @click="popupGender = true">
                        <p>{{gender}}</p>
                        <span class="headportrait-div-bottom">
                            <svg fill="#d8d8d8">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#right"></use>
                            </svg>
                        </span>
                    </div>
                </section>
            </div>
            <div class="info-router">
                <section class="headportrait headportraitwo">
                    <h2>生日</h2>
                    <div class="headportrait-div" @click="open('picker2')">
                        <p>{{birthday}}</p>
                        <span class="headportrait-div-bottom">
                            <svg fill="#d8d8d8">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#right"></use>
                            </svg>
                        </span>
                    </div>
                </section>
            </div>
            <div class="info-router">
                <section class="headportrait headportraitwo headportraithree">
                        <h2>所在地</h2>
                        <div class="headportrait-div" @click="popupAdress = true">
                        	<p>{{ address }}</p>
                            <span class="headportrait-div-bottom">
                                <svg fill="#d8d8d8">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#right"></use>
                                </svg>
                            </span>
                        </div>
                </section>
            </div>
            <section class="bind-phone">
                安全设置
            </section>
            <router-link to="/password" class="info-router">
                <section class="headportrait headportraitwo headportraithree">
                        <h2>登录密码</h2>
                        <div class="headportrait-div">
                            <p>修改</p>
                            <span class="headportrait-div-bottom">
                                <svg fill="#d8d8d8">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#right"></use>
                                </svg>
                            </span>
                        </div>
                </section>
            </router-link>
            <section class="exitlogin" @click="outLogin">退出登录</section>
        </section>

		<mt-popup v-model="popupGender" position="bottom" class="mint-popup">
			<div class="btnbox">
				<span @click="popupGender = false">取消</span>
				<span @click="setGender">确定</span>
			</div>
			<mt-picker :slots="setSlot" @change="onSexChange" :visible-item-count="3"></mt-picker>
		</mt-popup>

		<mt-datetime-picker
			ref="picker2"
			type="date"
			:startDate="startDate"
			:endDate="endDate"
			v-model="formCache.birthday"
			@confirm="handleChange">
		</mt-datetime-picker>

		<mt-popup v-model="popupAdress" position="bottom" class="mint-popup">
			<div class="btnbox">
				<span @click="popupAdress = false">取消</span>
				<span @click="setAdress">确定</span>
			</div>
			<mt-picker :slots="addressSlots" @change="onAddressChange"></mt-picker>
		</mt-popup>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
	import addressData from '@/config/addressData.js' // 地址
	import {update, upload, logout, imgBaseUrl} from '@/api'
	import {mapMutations, mapState} from 'vuex'
    import headTop from '@/components/header/head'

    export default {
        data(){
            return{
				imgBaseUrl,
                username:'',
				birthday: null,
				gender: null,
				address: null,
				
				formUpdate: {
					birth_year: null,
					birth_month: null,
					birth_day: null,
					gender: null,
					region: null,
					city: null,
				},
				formCache: {
					region: null,
					city: null,
					gender: null,
					birthday: '1980-1-1',
				},
				popupGender: false,
				popupAdress: false,
				startDate: new Date('1900'),
				endDate: new Date(),

				setSlot: [{
					flex: 1,
					defaultIndex: 0,
					values: ['男','女'],
					className: 'slot1'
				}],
				addressSlots: [
					{
						flex: 1,
						values: Object.keys(addressData),
						className: 'slot1',
						textAlign: 'center'
					}, {
						divider: true,
						content: '-',
						className: 'slot2'
					}, {
						flex: 1,
						values: ['东城区'],
						className: 'slot3',
						textAlign: 'center'
					}
					],
				}
		},
        components: {
            headTop,
        },
        computed:{
            ...mapState([
                'userInfo'
            ]),
		},
        watch: {
            userInfo: function (value) {
                if (value && value.user_id) {
                }
            }
        },
		mounted(){
			this.initData();
		},
        methods: {
            ...mapMutations([
				'OUT_LOGIN',
				'DIALOG_LOGIN',
				'RECORD_USERINFO',
			]),

			toDou(n){
				return n<10?'0'+n:n;
			},
			initData(){
				if (this.userInfo && this.userInfo.user_id) {
					let username = this.userInfo.username;
					let gender = this.userInfo.gender;
					let birth_year = this.userInfo.birth_year;
					let birth_month = this.userInfo.birth_month;
					let birth_day = this.userInfo.birth_day;
					let region = this.userInfo.region;
					let city = this.userInfo.city;

                    this.username = username?username:this.userInfo.mobile;
					this.gender = gender?(gender!=1?'女':'男'): '点击设置';
					this.birthday =birth_year?`${birth_year}-${this.toDou(birth_month)}-${this.toDou(birth_day)}`: '点击设置';
					this.address = region?region+city:'点击设置';

					this.formCache.birthday =gender && `${birth_year}-${birth_month}-${birth_day}`;

					this.formUpdate = {
						birth_year:gender?birth_year:'',
						birth_month: birth_month?birth_month:'',
						birth_day: birth_day?birth_day:'',
						gender: gender?gender:'',
						region: region?region:'',
						city: city?city:'',
					}

				}
			},
			open(picker) {
				this.$refs[picker].open();
			},
			handleChange(value) {
				let y = value.getFullYear();
				let m = value.getMonth()+1;
				let d = value.getDate();
				this.birthday = `${y}-${this.toDou(m)}-${this.toDou(d)}`;
				this.formUpdate.birth_year = y;
				this.formUpdate.birth_month = m;
				this.formUpdate.birth_day = d;
			},
			setGender(){
				let tmp = this.formCache.gender
				this.gender = tmp;
				this.formUpdate.gender = tmp!='女'?1:2;
				this.popupGender = false;
			},
			setAdress(){
				let r = this.formCache.region;
				let c = this.formCache.city
				this.address = r+c;
				this.formUpdate.region = r;
				this.formUpdate.city = c;
				this.popupAdress = false;
			},
			onSexChange(picker, values) {
				this.formCache.gender = values[0];
			},
			
			onAddressChange(picker, values) {
				picker.setSlotValues(1, addressData[values[0]]);
				this.formCache.region = values[0];
				this.formCache.city = values[1];
			},
            //退出登录
            async outLogin(){
				this.$router.go(-1);
				this.OUT_LOGIN();
                await logout({user_id: this.userInfo.user_id});
			},
			
            async uploadAvatar(){
                //上传头像
                if (this.userInfo && this.userInfo.user_id) {
                    let input = document.querySelector('.profileinfopanel-upload')
                    let data = new FormData();
					data.append('file', input.files[0]);
					
					let res = await upload(data);
					if(res.data){
						let para = {
							uid: this.userInfo.user_id,
							user_id: this.userInfo.user_id,
							head_img: res.data
						}
						let res_update = await update(para);
						if(res_update.data){
							this.userInfo.head_img = res.data;
							this.RECORD_USERINFO(this.userInfo);
							// this.$store.state.userInfo.head_img = res.data;
						}else {
							if(res_update.tologin){
								this.DIALOG_LOGIN();
								this.$router.push('/login');
							}else{
								Toast(res_update.msg);
							}
						}

					}else {
						Toast(res.msg);
					}
                }else{
					this.DIALOG_LOGIN();
					this.$router.push('/login');
				}
			},
			async setUserInfo(){
				let para = Object.assign({}, this.formUpdate);
				para.uid = this.userInfo.user_id;
				para.user_id = this.userInfo.user_id;
				para.username = this.username;
				update(para).then(res => {
					if(res.data){
						Toast(res.msg);
						for(let i in para){
							this.userInfo[i] = para[i];
						}
						this.RECORD_USERINFO(this.userInfo);
						
					}else{
						if(res.tologin){
							this.DIALOG_LOGIN();
							this.$router.push('/login');
						}else{
							Toast(res.msg);
						}
					}
				})
			}
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	@import 'src/style/mixin.scss';
	.btnbox {
		display: flex;
		border-bottom: solid 1px #eaeaea;
		span {
			display: inline-block;
			width: 50%;
			text-align: center;
			line-height: 40px;
			font-size: 16px;
			color: #26a2ff;
		}
	}
	.mint-popup {
        width: 100%;
        .picker-slot-wrapper, .picker-item {
          backface-visibility: hidden;
        }
	}
	.submit {
		position: absolute;
		top: 0.6rem;
		right: 0.6rem;
		z-index: 999;
		font-size: 0.6rem;
	}
    .rating_page{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #f2f2f2;
        z-index: 202;
        padding-top: 1.95rem;
        p, span{
            font-family: Helvetica Neue,Tahoma,Arial;
        }
    }
    .profile-info{
        @include wh(100%,3.1rem);
        .profileinfopanel-upload{
            display: block;
            position: absolute;
            opacity: 0;
            top: 2.35rem;
            left: 0;
            @include wh(100%,3.1rem);
        }
        .headportrait{
            margin-top:.4rem;
            padding:.5rem .4rem;
            @include fj(space-between);
            align-items:center;
            border-top:1px solid #ddd;
            background:#fff;

            h2{
                @include sc(.6rem,#333);
                font-weight:500;
                display:flex;
				align-items:center;
				font-size:0.6rem;
            }
            .headportrait-div{
                span{
                    display:inline-block;

                    svg{
                        @include wh(100%,100%);
                    }
                }
                .headportrait-div-top{
                    @include wh(2rem,2rem);
                    @include borderRadius(50%);
                    vertical-align:middle;
                }
                .headportrait-div-bottom{
                    @include wh(.66667rem,1.4rem);
                    position:relative;
                    top:0.44rem;
                }
			}
			.username {
				text-align: right;
			}
        }
        .headportraitwo{
            margin-top:0;
            padding:.3rem .4rem;
            .headportrait-div{
                @include fj(left)
                p{
                    text-align:left;
                    line-height:1.39rem;
                    @include sc(.6rem,#999);
                    margin-right:.2rem;
                    font-weight:100;
                    font-family:Arial;
                }
                .headportrait-div-bottom{
                    top:0;
                }
            }
        }
        .headportraithree{
            border-bottom:1px solid #ddd;
        }
        .bind-phone{
            padding:.4rem .4rem;
            @include sc(.5rem,#666);
        }
        .exitlogin{
            width:96%;
            margin:1.3rem auto 0;
            line-height:1.5rem;
            @include borderRadius(1rem);
            text-align:center;
            background:#d8584a;
            @include sc(.6rem,#fff);

        }
        .exitlogin:active{
            opacity:.8;
            background:#C1C1C1;
        }
    }
    .info-router{
        display:block;
    }
    .coverpart{
        @include wh(100%,100%);
        @include allcover;
        .cover-background{
            @include wh(100%,100%);
            @include allcover;
            background:#000;
            z-index:100;
            opacity:.2;
        }
        .cover-content{
            width:94%;
            background:$fc;
            padding:17px;
            position:absolute;
            top:20%;
            left:3%;
            z-index:1000;
            @include borderRadius(5px);
            .sa-icon{
                @include wh(90px,90px);
                border:4px solid #f8bb86;
                @include borderRadius(50%);
                margin:20px auto;
                position:relative;
                .sa-body{
                    @include wh(5px,47px);
                    @include borderRadius(2px);
                    background:#f8bb86;
                    @include cl;
                    top:10px;
                }
                .sa-dot{
                    @include wh(7px,7px);
                    @include borderRadius(50%);
                    background:#f8bb86;
                    @include cl;
                    bottom:10px;
                }
            }
            h2{
                width:100%;
                text-align:center;
                @include sc(30px,#575757);
                font-weight:500;
                margin:25px 0;
            }
            .sa-botton{
                width:100%;
                text-align:center;

                button{
                    display:inline-block;
                    padding:.4rem 1rem;
                    @include borderRadius(5px);
                    @include sc(.6rem,$fc);
                    letter-spacing:1px;
                    margin-top:26px;
                }
                .waiting{
                    background:#C1C1C1;
                    margin-right:.4rem;
                }
                .quitlogin{
                    background:rgb(221, 107, 85);
                }
            }

        }
    }
    @-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 0;
  }
}
body .coverpart .cover-animate{
    transition:all 1s;
    animation:bounceIn .6s;
}
body .coverpart .cover-animate-leave{
    animation:zoomOut .4s;
}
.router-slid-enter-active, .router-slid-leave-active {
    transition: all .4s;
}
.router-slid-enter, .router-slid-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
}
</style>
